<!doctype html>
<html>
	<head>
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width" />
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
		
		<title>Smart Park ATL</title>

		<link rel="stylesheet" type="text/css" href="assets/css/jquery.mobile.css" media="screen" charset="UTF-8"/>
		<link rel="stylesheet" type="text/css" href="assets/css/master.css" media="screen" />
		<link rel="stylesheet" type="text/css" href="assets/css/styles.css" media="screen" />

		<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
		<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>

		<script src="assets/js/cordova-2.0.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="assets/js/xui.js" type="text/javascript" charset="utf-8"></script>
		
		<script src="assets/js/app.js" type="text/javascript" charset="utf-8"></script>
		<script src="assets/js/setup-buttons.js" type="text/javascript" charset="utf-8"></script>	
	</head>

	<body>
		
		<div id="splash" class="splash" style="width:300px; margin:0 auto; text-align:center;">
			<img src="assets/img/splash-logo.png"><br>
			<h3><font color="blue">Park ATL 1.0.0</font></h3>
			<p><font color="blue">&copy; 2013 CS 3750 Project.</font></p>
			<div id="logging-in-message" class="hide"></div>
			<div id="login-fieldset" class="hide">
				<label for="username"><font color="blue"> Username</font></label>
				<input name="username" id="username" placeholder="Username" value="" type="text" />
				<label for="password"><font color="blue">Password</font></label>
				<input name="password" id="password" placeholder="Password" value="" type="password" />
				<a href="" data-role="button" id="login_button" data-theme="b">Login</a>
			</div>
			<div id="logging-in-spinner" class="hide">
				<p>Logging In</p>
				<img src="assets/img/ajax-loader.gif">
			</div>
		</div>

		<div id="main_div" class="hide">
	 		<div id="title_bar">Smart Park ATL</div>
			<img src="assets/img/splash-logo.png"><br>
			<div id="welcome" class="view">
			  <div class="app_button" id="map_button">Find Car</div>
			  <div class="app_button" id="addtime_button">Pay Now</div>
	  	      <div class="app_button" id="settings_button">Settings</div>
	  	      <div class="app_button" id="help_button">Help</div>
			</div>
	
			<div id="map" class="view">
			    <p id="geolocation">Finding geolocation...</p>
				<input id="lat"><br>
				<input id="long">
				
			  <div class="map_image">
	              <img id="static_map" src="assets/img/staticmap.png">
			  </div>
			  <div class="app_button" id="map_back_button">Go Back</div>
			</div>
			
			<div id="settings" class="view">
			  <form id="settings_form">
			    <fieldset>
			      <legend>Map Type</legend>
				  <input type="radio" name="map" value="roadmap" checked>Road Map<br/>
			      <input type="radio" name="map" value="satellite">Satellite<br/>
			      <input type="radio" name="map" value="terrain">Terrain<br/>
			      <input type="radio" name="map" value="hybrid">Hybrid<br/>
			    </fieldset>
			    <fieldset>
			      <legend>Zoom Level</legend>
	  		      <input type="radio" name="zoom" value="10">Super Far<br/>
	  		      <input type="radio" name="zoom" value="12">Far<br/>
	  		      <input type="radio" name="zoom" value="15" checked>Normal<br/>
	  		      <input type="radio" name="zoom" value="18">Close<br/>
	  		      <input type="radio" name="zoom" value="20">Super Close<br/>
	  		     </fieldset>
			      <div class="app_button" id="settings_save_button">Save</div>
		      </form>
			</div>

		</div>
	</body>
</html>